<script setup>
import SonSonCom from './SonSonCom.vue'



// 子组件通过 props 接收父组件传递的数据
const props = defineProps({
  msg: {
    type: String,
    required: true
  }
})

//子传 父
const emit = defineEmits(['update:msg'])

const sendMsg = ()=>{
  // this.$emit('update:msg')
  // 2. 调用 emit，发送消息(触发事件)
  emit('update:msg', '👿子组jian->'+props.msg)
}

const myMsg = '子组件自己内部的数据'

const validate=()=>{
  console.log('内部实现了表单验证')
}


//默认情况下，通过模板引用取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
// 需要通过 defineExpose 主动暴露后，父组件才能调用组件的方法
defineExpose({
  myMsg,
  validate
})



</script>

<template>
  <!-- 结构 -->
  <div class="son">
    <h2>子组件</h2>
    <p>{{ msg }}</p>
    <button @click="sendMsg">dian</button>
  </div>

  <SonSonCom/>
</template>

<style scoped>
  .son{
    border: 5px solid gold;
  }
</style>
